<template>
  <div class="">
    <Col :md="24" :lg="24">
        <Row :gutter="5">
            <Col :xs="24" :sm="12" :md="8" :style="{marginBottom: '10px'}">
              <Card style="height: 100px;">
                <Row class="margin-top-8">
                    <Col span="6"><p class="notwrap">试卷名称:</p></Col>
                    <Col span="18" class="padding-left-8">{{testtitle}}</Col>
                </Row>
                <Row class="margin-top-8">
                    <Col span="6"><p class="notwrap">考试时间:</p></Col>
                    <Col span="18" class="padding-left-8">{{teststartdate}}-{{testenddate}}</Col>
                </Row>
                <Row class="margin-top-8">
                    <Col span="6"><p class="notwrap">当前时间:</p></Col>
                    <Col span="18" class="padding-left-8">{{currentTime}}</Col>
                </Row>

              </Card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="user_created_count"
                    :end-val="count.usersum"
                    iconType="android-person-add"
                    color="#2d8cf0"
                    intro-text="考生总数"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="visit_count"
                    :end-val="count.usertestnum"
                    iconType="ios-eye"
                    color="#64d572"
                    :iconSize="50"
                    intro-text="答题人数"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="collection_count"
                    :end-val="count.submitusernum"
                    iconType="upload"
                    color="#ffd572"
                    intro-text="交卷人数"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="transfer_count"
                    :end-val="count.lostusernum"
                    iconType="shuffle"
                    color="#f25e43"
                    intro-text="缺考人数"
                ></infor-card>
            </Col>
        </Row>
    </Col>
    <Row>
      <Button type="primary" shape="circle"
      icon="refresh" status style="font-size: 18px;padding: 3px 6px;float: right;"
      @click="refreshData"></Button>
    </Row>

    <Row :gutter="10" class="margin-top-10">
      <Col :md="24" :lg="24" :style="{marginBottom: '10px'}">
        <Table :columns="columns" :data="model.rows" border></Table>
      </Col>
      <Col :md="24" :lg="24" :style="{marginBottom: '10px'}">
        <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
      </Col>
    </Row>
    <Modal :width="1366" v-model="show" title="试卷详情" id="online-preview">
      <paper-preview :data="paperData"></paper-preview>
      <div slot="footer">
      </div>
    </Modal>
    <Spin size="large" fix v-if="model.state === '查询'"></Spin>
  </div>

</template>
<script>
import inforCard from '../../home/components/inforCard.vue';
import paperPreview from '../../preview/paper-preview.vue'
import PagedList from '@/plugins/PagedList.js'
import axios from 'axios'
let gen = async function (self) {
  // 考试情况人数统计
  let peopleRes = await axios.post('rs/sql/ppnum', {data: {unit: self.$store.state.user.userinfo.unit}})
  // console.log('考试情况人数统计', peopleRes);
  self.count = Object.assign({}, peopleRes.data[0])
  // 当天考试试卷详细内容
  let infoRes = await axios.post('rs/sql/gettestpaperinfo', {data: {unit: self.$store.state.user.userinfo.unit}})
  // console.log('考试情况人数统计', infoRes);
  self.testtitle = infoRes.data[0].testtitle
  self.teststartdate = infoRes.data[0].teststartdate
  self.testenddate = infoRes.data[0].testenddate
  // // 当天考试交卷详情
  let listRes = await self.model.search()
}
    export default {
      components: {
          inforCard,
          paperPreview
      },
        data () {
            return {
              show: false,
              model: new PagedList('rs/sql/testinfo', 20, {order: "'id'"}),
              paperData: {},
              testtitle: '',
              teststartdate: '',
              testenddate: '',
              currentTime: '',
              count: {
                  usersum: 0,
                  usertestnum: 0,
                  submitusernum: 0,
                  lostusernum: 0
                },
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        align: 'center',
                        width: 80
                    },
                    {
                        title: '考生姓名',
                        key: 'username'
                    },
                    {
                        title: '身份证号',
                        key: 'idnumber'
                    },
                    {
                        title: '开始答题时间',
                        key: 'singdate'
                    },
                    {
                        title: '交卷时间',
                        key: 'submitdate'
                    },
                    {
                        title: '分数',
                        key: 'examusernum'
                    },
                    {
                        title: '操作',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                              props: {
                                  type: 'primary'
                              },
                              style: {
                                padding: '0'
                              },
                              on: {
                                  click: () => {
                                      this.showPaper(params.row)
                                  }
                              }
                            }, '查看试卷');
                        }
                    }
                ]
            };
        },
        mounted () {
          this.getCurrentTime()
          gen(this)
        },
        methods: {
            getCurrentTime () {
              this.current = setInterval(() => {
                this.currentTime = this.$formatDateTime()
              }, 1000);
            },
            showPaper (row) {
              this.model.state = '查询'
              this.show = true
              // 获取试卷
              axios.post('rs/logic/getusertestquinfo', {data: {testid: row.testid, userid: row.userid}}).then(res => {
                this.paperData = {
                  testinfo: res.data.testinfo,
                  tests: [res.data.oneques, res.data.douques, res.data.judques],
                  userinfo: row
                }
                // this.show = false
              }).catch(error => {
                this.$Message.warning({
                  content: '获取试卷失败'
                })
              }).finally(() => {
                this.model.state = '正确'
              })
            },
            loadPage (index) {
              this.model.loadPage(index)
            },
            refreshData () {
              gen(this)
            }
        },
        computed: {
          height () {
            return document.documentElement.clientHeight - 250
          }
        }
    };
</script>
<style lang="less">
  #online-preview {
    .ivu-modal {
      top: 50px;
    }
    .ivu-modal-body {
      position: relative;
      height: 750px;
    }
  }
</style>
